<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const linexData = ref([
    '呼和浩特市',
    '包头市',
    '鄂尔多斯市',
    '乌兰察布市',
    '乌海市',
    '巴彦淖尔',
    '阿拉善盟',
    '兴安盟',
    '通辽市',
    '赤峰市',
    '呼伦贝尔市',
    '锡林郭勒盟',
    '外阜'
])
const linesData = ref([2370, 1042, 1035, 229, 289, 356, 47, 313, 912, 416, 597, 314, 318])
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    grid: {
        top: '13%',
        right: '2%',
        left: '5%',
        bottom: '5%',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',
            data: linexData.value,
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 128, 255, 0.36)',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                margin: 10,
                color: 'rgba(255,255,255,1)',
                textStyle: {
                    fontSize: 12,
                },
                formatter: function(e) {
                    let str = ''
                    let arr = e.split('')
                    for (let i = 0; i < arr.length; i++) {
                        str += arr[i] + '\n'
                    }
                    return str
                },
            },
        },
    ],
    yAxis: [
        {
            name: '',
            nameLocation: 'end',
            nameTextStyle: {
                align: 'center'
            },
            axisLabel: {
                formatter: '{value}',
                color: '#4B779B',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        },
    ],
    series: [
        {
            type: 'bar',
            data: linesData.value,
            label: {
                normal: {
                    position: 'top',
                    show: true,
                    color: '#F2FF00',
                    borderWidth: 1,
                    borderColor: '#1890FF',
                    borderRadius: 4,
                    padding: [6, 4, 4, 4],
                },
            },
            barWidth: 15,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#159AFF',
                        },
                        {
                            offset: 1,
                            color: '#15E0FF',
                        },
                    ]),
                },
            },
        },
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
